<template>
  <div class="MessageDisplay">
        <ul>
           <li v-for="(item,index) in userComment" >
                   <MessageContent :comment = item v-if="userComment!=null" @messageDel="messageDel" @messages="messages">
                   </MessageContent>
           </li>
        </ul>
  </div>

</template>

<script>
import api from "@/api";
import MessageContent from "@/components/PublicComponents/MessageContent.vue";

export default {
    name: "MessageDisplay",
    components: {MessageContent},
    data(){
        return{
            info:1,
            kk:[1,2,3],
            userComment:[{
               id:"",
               sender:"",
               recipient:"",
               message:"",
               dataTime:"",
               state:"",
            }],
        }
    },
    created() {


    },
    mounted() {
        //获取用户的所有消息
        api.communicationUserInfo().then((res)=>{
           if(res.data.code === 200){
               this.userComment = res.data.data;
               this.state_length(res.data.data)
           }
        })
    },
    methods:{
        messages(){
            this.$emit("messages");
        },
        state_length(info){
            let length = 0;
              for(let i =0;i<info.length;i++){
                  if(info[i].state === 0){
                      length+=1;
                  }
              }
        },
        messageDel(id){
            for(let i =0;i< this.userComment.length;i++){
               if( this.userComment[i].id === id){
                   this.userComment.splice(i,1)
                   api.messageDel(id).then((res)=>{
                       if(res.data.code === 200){
                           alert("删除成功")
                       }
                   })
                   break;
               }
            }

        }
    }
}
</script>

<style scoped>
.MessageDisplay{
   width: 100%;
   height: 100%;
   padding: 5px;
}
.MessageDisplay ul{
   height: 90%;
   overflow:auto;
}
.MessageDisplay ul li{
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   height: 9vh;
   min-height: 60px;
   padding: 5px;
   flex-wrap: wrap;
   margin-bottom: 10px;
   transition: all .2s;
   animation: lis .5s ease-in-out 0s 1 forwards;
}
@keyframes lis {
    0%{
           transform: scale(0);
    }100%{
             transform: scale(1);
         }
}
.MessageDisplay ul li:hover{
   cursor: pointer;
    background: rgba(176, 170, 170, 0.2);
}
.MessageDisplay .user_img{
   width: 55px;
   height: 55px;
   border-radius: 50%;
   margin-right: 10px;
}
.MessageDisplay p{
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow:ellipsis;
   max-width: 30vw;
}
.MessageDisplay p span{
   margin: auto;
}
.tishi{
   position: absolute;
   top: 3%;
   left: 0.5%;
   display: flex;
    justify-content: center;
    align-items: center;
   min-width: 18px;
    min-height: 18px;
   text-align: center;
   border-radius: 50%;
   color: white;
}
ul{
    width: 100%;
    list-style: none;
    height: 84%;
    overflow: auto;
    margin-top: 5px;
    overflow-y: scroll;
}
ul::-webkit-scrollbar {
    width: 4px;
}
ul::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
}
ul::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
</style>